import { Form, Input, Modal, Button, Select } from 'antd';
import React, { Component } from 'react';
const { Option } = Select;
import { connect } from 'dva';
import { pagination } from '@/utils/utils';
import styles from '../index.less';

const FormItem = Form.Item;


const formItemLayout = {
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 15 },
  },
  labelCol: {
    xs: { span: 22 },
    sm: { span: 6 },
  },
};

@connect(({ userManage }) => ({
  mobileUser: userManage.mobileUser
}))

class CreateUpdateForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      setPagination: {
        ...pagination
      },
      searchRequest: {
        auditing: '',
        search: '',
      },
      staticContact: {
        mobile: '',
        emailAddress: '',
        idNumber: '',
      }
    };
  }

  componentDidMount() {
    this.searchMobileUser()
  }

  searchMobileUser = () => {
    const { searchRequest } = this.state
    const { dispatch } = this.props;
    const pagination = {
      page: 1,
      size: 9999,
    }
    dispatch({
      type: 'userManage/searchMobileUser',
      payload: { searchRequest, pagination },
    })
  }

  handleChangeSelect = async (state, val) => {
    const { mobileUser } = this.props
    mobileUser.content.forEach(item => {
      if (item.id == val) {
        this.setState({
          staticContact: {
            mobile: item.mobile,
            emailAddress: item.emailAddress,
            idNumber: item.idNumber,
          }
        })
      }
    })
  }

  handleOk = () => {
    const { form, onSubmit } = this.props
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      // form.resetFields();
      onSubmit(fieldsValue);
    });
  };

  render() {
    const { modalVisible, form, onCancel, mobileUser } = this.props;
    const { staticContact } = this.state
    return (
      <Modal
        destroyOnClose
        title="添加承揽方"
        visible={modalVisible}
        onCancel={() => onCancel()}
        footer={[
          <Button key="submit" type="primary" onClick={this.handleOk}>
            确认添加
          </Button>
        ]}
      >
        <FormItem label="承揽方姓名" {...formItemLayout}>
          {form.getFieldDecorator('mobileUserId', {
            rules: [{ required: true, message: '请输入姓名' }],
          })(<Select
            allowClear
            showSearch
            style={{ width: '100%' }}
            placeholder="请输入承揽方姓名"
            optionFilterProp="children"
            onChange={v => this.handleChangeSelect('search', v)}
          >
            {mobileUser.content.map(item => (
              <Option key={item.id} value={item.id}>
                {item.name} - {item.mobile}
              </Option>
            ))}
          </Select>)}
        </FormItem>
        <ul className={styles.userJobDetail}>
          <li>联系方式：{staticContact.mobile}</li>
          <li>邮箱：{staticContact.emailAddress}</li>
          <li>身份证：{staticContact.idNumber}</li>
        </ul>
      </Modal>
    );
  }
}

export default Form.create()(CreateUpdateForm);



